<template>
    <div class= "city-list" ref= "wrapper">
        <div>
            <!-- 当前城市列表 -->
            <div>
                <div class="city-list-title border-topbottom">
                    您的位置
                </div>
                <div class= "city-btn-list">
                    <div class= "city-btn-wrapper">
                        <button class= "city-btn">{{this.city}}</button>
                    </div>
                </div>
            </div>
            <!-- 热门城市列表 -->
            <div>
                <div class="city-list-title border-topbottom">
                    热门城市
                </div>
                <div class= "city-btn-list">
                    <div
                    class= "city-btn-wrapper"
                    v-for= "item in hotCities"
                    :key= "item.id"
                    @click= 'handleCityChange(item.name)'
                    >
                        <button class= "city-btn" >{{item.name}}</button>
                    </div>
                </div>
            </div>
            <!-- 首字母城市列表 -->
            <div
            v-for= '(item,key) in cities'
            :key= "key"
            :ref= "key"
            >
                <!-- 首字母 -->
                <div class="city-list-title border-topbottom">
                    {{key}}
                </div>
                <!-- 城市列表 -->
                <div
                class="city-item-list"
                v-for= 'inneritem in item'
                :key= "inneritem.id"
                @click= 'handleCityChange(inneritem.name)'
                >
                    <div class= "city-item border-bottom">{{inneritem.name}}</div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
import { mapState, mapMutations, mapGetters } from 'vuex'
import BScroll from 'better-scroll'
export default {
    name: 'city-list',
    props: {
        hotCities: Array,
        cities: Object,
        letter: String
    },
    computed: {
        //将vuex的state中的city属性以city的名字映射到计算属性中
        ...mapState(['city'])
        // ...mapState({city: 'city'})
        //将vuex的getters中的doubleCity属性以doubleCity的名字映射到计算属性中
        // ...mapGetters(['doubleCity'])
    },
    methods: {
        /////////city-search中也有这个方法，点击城市，通过更改vuex，将首页和当前城市列表中的城市更改，并且返回主页
        handleCityChange(city) {
            //直接通过mutation更改state里面的city属性
            this.hotCityChange(city)
            //通过router的push方法，在触发这个事件函数时跳转到跟页面
            this.$router.push('/')
        },
        //将名为hotCityChange的mutation以hotCityChange方法映射到当前组件的methods中
        ...mapMutations(['hotCityChange'])
    },
    mounted() {
        //新增属性click: true
        this.scroll = new BScroll(this.$refs.wrapper, {
            //click: true使设置了滚动的元素内容可以触发点击事件
            click: true
        })
    },
    // watch 观察也有属性的变化
    watch: {
        //letter数据来自alphabe组件的点击事件，通过City组件传递过来
        letter() {
            if (this.letter) {
                const element = this.$refs[this.letter][0]
                this.scroll.scrollToElement(element)
            }
        }
    }
}
</script>

<style lang= "stylus" scoped>
@import '../../../assets/styles/varibles.styl';/* 不能写在url中 */
*
    box-sizing border-box
    padding 0
    margin 0
    .border-topbottom
        &:before
            border-color #ccc
        &:after
            border-color #ccc
    .border-bottom
        &:before
            border-color #ccc
    .city-list
        position absolute
        top 1.5rem
        bottom 0
        left 0
        right 0
        overflow hidden
        .city-list-title
            text-indent .15rem
            background #eee
            color #666
            line-height .6rem
            font-size .32rem
        .city-btn-list
            display flex
            flex-flow wrap
            margin .075rem .5rem .075rem .075rem
            .city-btn-wrapper
                width 33.3%
                display flex
                .city-btn
                    flex 1
                    margin .075rem .075rem
                    text-align center
                    border .02rem solid #ccc
                    border-radius .15rem
                    font-size .32rem
                    background #fff
        .city-item-list
            width 100%
            display flex
            flex-flow column
            .city-item
                line-height .6rem
                flex 1
                height .6rem
                text-align left
                text-indent .15rem
                font-size .32rem
                /* background #fff 会覆盖边界的颜色，不知原因*/
</style>
